<template>
  <div class="BiggestWindow">
    <div class="funcMenu">
      <el-dropdown>
        <el-button type="primary" style="width: 60px;">前往<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <RouterLink to="/managesys/clublist">社团列表</RouterLink>
            </el-dropdown-item>
            <el-dropdown-item>
              <RouterLink to="/managesys/myclubjoin">我的社团</RouterLink>
            </el-dropdown-item>
            <el-dropdown-item>
              <RouterLink to="/managesys/clubadd">社团管理</RouterLink>
            </el-dropdown-item>
            <el-dropdown-item>
              <RouterLink to="/managesys/person">个人中心</RouterLink>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="common-layout">
      <el-container>
        <el-header>
          <BigHead />
          <el-icon>
            <Promotion />
          </el-icon>
          <el-text tag="b" class="SysNotice">系统公告：</el-text>
          <span class="SysNotice">高校社团管理系统开发完毕！进入公测阶段！</span>
          <hr>
        </el-header>

        <el-main class="SecWindows">
          <div>
            <div class="articleDisplay">
    
  </div>

            <div class="homepic">
              <el-carousel :interval="3000" type="card" height="300px" :autoplay="true" >
                <el-carousel-item v-for="item in imageList" :key="item" @click="handleClickImage(item)">
                  <el-image style="width: 100%; height:100%" :src="item.imageUrl" fit="cover"/>
                 <el-text class="imageTitle">{{ item.title }} </el-text>
                  
                </el-carousel-item>
              </el-carousel>
            </div><br><br>
            <div class="common-layout">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content ep-bg-purple" />
                  <div class="mb-4">
                    <el-button class="butm" type="primary" round @click="dialogTableVisible=true" >社团风采</el-button>

                  </div>
                  <el-table :data="articleList1" 
                  stripe style="width: 100%" class="Actvytable" 
                  :showHeader="false" @cell-click="handleCellClick">
                    <el-table-column prop="title" />
                    <el-table-column prop="createTime" width="200" />
                  </el-table>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content ep-bg-purple-light" />
                  <div class="mb-4">
                    <el-button class="butm" type="primary" round >社团活动</el-button>

                  </div>
                  <el-table :data="articleList2" 
                  stripe style="width: 100%" class="Actvytable" 
                  :show-header="false" @cell-click="handleCellClick">
                    <el-table-column prop="title" />
                    <el-table-column prop="createTime" width="200" />
                  </el-table>
                </el-col>
              </el-row>
            </div><br><br><br><br>
            <el-row :gutter="20">
              <el-col :span="2"></el-col>
              <el-col :span="2">
                <div class="grid-content ep-bg-purple" />
                <div class="grid-content ep-bg-purple" />
                <div class="avt1">
                  <el-avatar :size="80" @error="errorHandler">
                    <img src="../img/headImage1.png" />
                  </el-avatar>

                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content ep-bg-purple" />
                <el-text class="title2">社团成员风采展示</el-text>
                <div class="titleEn2">Members' demeanor showcase</div>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="2"><el-divider class="lineV" direction="vertical" /></el-col>
              <el-col :span="2">
                <div class="grid-content ep-bg-purple" />
                <div class="grid-content ep-bg-purple" />
                <div class="avt1">
                  <el-avatar :size="80" @error="errorHandler">
                    <img src="../img/headImage2.png" />
                  </el-avatar>

                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content ep-bg-purple" />
                <el-text class="title2">社团媒体作品</el-text>
                <div class="titleEn2">the Beauty of Community Media</div>
              </el-col>


            </el-row>
            <el-row :gutter="20">
              <el-col :span="3"></el-col>
              <el-col :span="8">
                <video class="vd1" controls :src="videoInfo.multiMediaUrl"></video>
              </el-col>
              <el-col :span="5"></el-col>
              <el-col :span="8">
                <el-table :data="articleList3"  width="420" 
                class="Actvytable2" :showHeader="false" @cell-click="handleCellClick">
                  <el-table-column prop="title" width="260"/>
                  <el-table-column prop="createTime" width="150" />
                </el-table></el-col>
            </el-row>
          </div>
        </el-main>
        <el-footer class="foot"><br><br><br><br>
          <hr>小组成员：武榆博、李承昊、王帅<br>
        </el-footer>
      </el-container>
    </div>
  </div>
  <show-works :id="workId" :flag="showFlag"></show-works>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import ShowWorks from '@/components/ShowWorks.vue';
import showMessageTip from '@/utils/showMessage';
import api from '@/api';
const showFlag =ref(false);
const workId =ref();
const articleList1 = ref([]);
const articleList2 = ref([]);
const articleList3 = ref([]);
const videoInfo = ref({});
const imageList = ref([]);

  const applicateInfo = ref({
      articleNum:18,
      videoNum:1
    });
const item = ref();
onMounted(async()=>{
 const result = await api.getHomepageMultimedia(applicateInfo.value);
if(result[0]==0){
    const data = result[1].data;
    const workList = data.data;
    for(let i=0;i<6;i++){
      if(workList[i] == null) return;
      workList[i].createTime= workList[i].createTime.substr(0,10)
      if(workList[i].type==0){
        articleList1.value.push(workList[i]);
        if(imageList.value,length<5)
        imageList.value.push({
          multiMediaId:workList[i].multiMediaId,
          title:workList[i].title,
          imageUrl:workList[i].coverUrl
        })
      }
      else{
        if(workList[i].type==1){
          videoInfo.value={
            src:workList[i].multiMediaId,
            title:workList[i].title,
            multiMediaUrl:workList[i].multiMediaUrl
          }     
        }
      }
      
    }

    for(let i=6;i<12;i++){
      if(workList[i] == null) return;
      workList[i].createTime= workList[i].createTime.substr(0,10)
      if(workList[i].type==0){
        articleList2.value.push(workList[i]);
        if(imageList.value,length<5)
        imageList.value.push({
          multiMediaId:workList[i].multiMediaId,
          title:workList[i].title,
          imageUrl:workList[i].coverUrl
        })
      }
      else{
        if(workList[i].type==1){
          videoInfo.value={
            src:workList[i].multiMediaId,
            title:workList[i].title,
            multiMediaUrl:workList[i].multiMediaUrl
          }
        }
      }
    }

    for(let i=12;i<18;i++){
      if(workList[i] == null) return;
      workList[i].createTime= workList[i].createTime.substr(0,10)
      if(workList[i].type==0){
        articleList3.value.push(workList[i]);
        if(imageList.value,length<5)
        imageList.value.push({
          multiMediaId:workList[i].multiMediaId,
          title:workList[i].title,
          imageUrl:workList[i].coverUrl
        })
      }
      else{
        if(workList[i].type==1){
          videoInfo.value={
            src:workList[i].multiMediaId,
            title:workList[i].title,
            multiMediaUrl:workList[i].multiMediaUrl
          }
        }
      }
    }
} 
else{
  showMessageTip('首页信息网络请求失败','error');
}

})
const handleCellClick=async(row, column, cell, event)=>{
  workId.value =row.multiMediaId;
  showFlag.value=!showFlag.value;
}
const handleClickImage= async(data)=>{
  workId.value =data.multiMediaId;
  showFlag.value=!showFlag.value;

}
const errorHandler = () => false
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.funcMenu {
  position: fixed;
  top: 50%;
}

.el-header {
  padding: 0;
}

.example-showcase .el-dropdown+.el-dropdown {
  margin-left: 15px;
}

.butm {
  font-family: '宋体';
  font-size: larger;
  font-weight: bolder;
}

.homepic {
  position: relative;
  margin-top: 2%;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-link {
  margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
  /* vertical-align: text-bottom; */
}

.moreInfo {
  position: relative;
  left: 70%;
}

.moreInfo2 {
  position: relative;
  margin-top: 60px;
  font-size: medium;
  margin-left: 20px;
  right: 1px;

}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.title2 {
  color: black;
  font-size: 30px;
  font-family: "宋体";
  font-weight: 300;
}

.titleEn2 {
  color: CECECE;
  font-size: 20px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-shadow: 3px 3px 3px #475669;
}

.avt1 {
  position: relative;
  top: -45px;
}

.el-divider--vertical {
  height: 90px;
  margin-top: 5px;
  margin-left: 50px;
}

.SecWindows {
  margin-left: 5%;
  margin-right: 5%;
}

.SysNotice {
  font-family: "宋体";
  font-size: medium;
}

.foot {
  position: relative;
  text-align: center;
  bottom: 1px;
}

.Actvytable {
  font-family: '宋体';
  font-size: medium;
  font-weight: 700;
}
.Actvytable2{
  font-family: '宋体';
  font-size: large;
  font-weight: 700;
  position: relative;
  right: 20%;

}
.vd1{
  position: relative;
  right: 20%;
  bottom: 10%;
  width: 33vw;
  height: 300px;
}
.imageTitle{
  color: white;
  font-family: '仿宋';
  font-weight: bolder;
  font-size: 30px;
  position: relative;
  bottom: 17%;
  padding-left: 5px;
}
</style>